---
title: API Reference
description: Detailed documentation of all the properties, types, and options available in the Emblor tag input component.
---

## Demos

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Autocomplete</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Enable or disable the autocomplete feature for the tag input.
</p>

<ComponentPreview enableAutocomplete restrictTagsToAutocompleteOptions />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Include Tags In Input</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Allows users to display tags inside the input field for a more compact and inline appearance.
</p>

<ComponentPreview propName="inlineTags" selectOptions={[true, false]} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Custom tag render</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Replace the standard tag appearance with your own custom-designed tags.
</p>

<ComponentPreview

customTagRenderer={(tag, isActiveTag) => {
return (

<div
  key={tag.id}
  className={`px-2 py-1 bg-red-500 rounded-full
        ${isActiveTag ? 'ring-ring ring-offset-2 ring-2 ring-offset-background' : ''}`}
>
  <span className="text-white text-sm mr-1">{tag.text}</span>
</div>
); }} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Max tags</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Set the maximum number of tags that can be added.
</p>

<ComponentPreview maxTags={5} showCount />

{' '}

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Draggable</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Allow tags to be dragged and dropped to reorder them.
</p>

<ComponentPreview draggable />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Tag Popover</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Allows users to view all entered tags in a popover overlay, offering easier management of tags.
</p>

<ComponentPreview usePopoverForTags />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Add on paste</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  When true, allow adding tags on paste. This works for a list of tags separated by a delimiter.
</p>

<ComponentPreview addOnPaste />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Truncate</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Prevent tags from overflowing the tag input by specifying the maximum number of characters to display.
</p>

<ComponentPreview truncate={4} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Clear all tags</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">Clear all tags from the tag input.</p>

<ComponentPreview clearAll />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Allow duplicate tags</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Allow duplicate tags to be added to the tag input.
</p>

<ComponentPreview allowDuplicates />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Add tags on blur</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">Add tags when the input field loses focus.</p>

<ComponentPreview addTagsOnBlur />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Input field position</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Changes the position of the input field in relation to the tags. **_ This only works when inlineTags is set to false
  and the tags are rendered as a separate list above/below the input field. _**
</p>

<ComponentPreview propName="inputFieldPosition" selectOptions={['top', 'bottom']} inlineTags={false} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Tag direction</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Changes the layout of the tag list either as a row or as a column. **_ This only works when inlineTags is set to false
  and the tags are rendered as a separate list above/below the input field. _**
</p>

<ComponentPreview propName="direction" selectOptions={['row', 'column']} inlineTags={false} />

## API Reference

### General Properties

<br />

<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[150px] border-r">Prop</TableHead>
      <TableHead className="w-[100px] border-r">Default</TableHead>
      <TableHead className="w-[200px] border-r">Type</TableHead>
      <TableHead className="border-r">Description</TableHead>
      <TableHead>Required</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="border-r">placeholder</TableCell>
      <TableCell className="bomrder-r">""</TableCell>
      <TableCell className="border-r">string</TableCell>
      <TableCell className="border-r">Placeholder text for the input when no tags are present.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">tags</TableCell>
      <TableCell className="border-r">[]</TableCell>
      <TableCell className="border-r">Tag[]</TableCell>
      <TableCell className="border-r">An array of tag objects that are displayed as pre-selected.</TableCell>
      <TableCell>Yes</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">setTags</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">React.Dispatch</TableCell>
      <TableCell className="border-r">Function to update the state of the tags.</TableCell>
      <TableCell>Yes</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">maxTags</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">number</TableCell>
      <TableCell className="border-r">Sets a limit on the number of tags a user can add.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">minTags</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">number</TableCell>
      <TableCell className="border-r">Sets a minimum number of tags a user must add.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">readOnly</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Prevents the user from modifying the tags.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">disabled</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Disables the tag input.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">allowDuplicates</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Allows the user to add duplicate tags.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">maxLength</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">number</TableCell>
      <TableCell className="border-r">Sets a maximum character limit for each tag.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">minLength</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">number</TableCell>
      <TableCell className="border-r">Sets a minimum character limit for each tag.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">styleClasses</TableCell>
      <TableCell className="border-r">{}</TableCell>
      <TableCell className="border-r">Object</TableCell>
      <TableCell className="border-r">
        Custom classes to style the tag input and its subcomponents. ***See the [Styling](/styling) section of the docs
        for more information.***
      </TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">inlineTags</TableCell>
      <TableCell className="border-r">true</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">
        Toggles between rendering the tags inline (in the input field) or in a tag list above the input when the user
        enters a tag.
      </TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">delimiterList</TableCell>
      <TableCell className="border-r">[]</TableCell>
      <TableCell className="border-r">string[]</TableCell>
      <TableCell className="border-r">
        An array of characters that can be used as delimiters to separate tags.
      </TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">delimiter</TableCell>
      <TableCell className="border-r">","</TableCell>
      <TableCell className="border-r">string</TableCell>
      <TableCell className="border-r">Character used to separate tags when pasting multiple tags.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">showCounter</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Displays a counter showing the number of tags added.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">placeholderWhenFull</TableCell>
      <TableCell className="border-r">""</TableCell>
      <TableCell className="border-r">string</TableCell>
      <TableCell className="border-r">Placeholder text displayed when the maximum number of tags is reached.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">sortTags</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Sorts the tags alphabetically.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">activeTagIndex</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">number | null</TableCell>
      <TableCell className="border-r">
        Sets the index of the tag that is currently active. This is useful when using keyboard navigation.
      </TableCell>
      <TableCell>Yes</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">setActiveTagIndex</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">number | null</TableCell>
      <TableCell className="border-r">
        Function to update the active tag index. This is useful when using keyboard navigation.
      </TableCell>
      <TableCell>Yes</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">truncate</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Truncates tags that exceed the maximum character limit.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">direction</TableCell>
      <TableCell className="border-r">"row"</TableCell>
      <TableCell className="border-r">"row" | "column"</TableCell>
      <TableCell className="border-r">
        Changes the layout of the tag list either as a row or as a column. ***This only works when inlineTags is set to
        false and the tags are rendered as a separate list above/below the input field.***
      </TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">addTagsOnBlur</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Adds tags when the input field loses focus.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">draggable</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Allows the user to drag and reorder tags.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">inputFieldPosition</TableCell>
      <TableCell className="border-r">"bottom"</TableCell>
      <TableCell className="border-r">"top" | "bottom"</TableCell>
      <TableCell className="border-r">
        Sets the position of the input field. ***This only works when inlineTags is set to false and the tags are
        rendered as a separate list above/below the input field.***
      </TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">clearAll</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Displays a "Clear All" button to remove all tags.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">usePopoverForTags</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Displays tags in a popover when they exceed the available space.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
  </TableBody>
</Table>

### Autocomplete Properties

<br />

<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[150px] border-r">Prop</TableHead>
      <TableHead className="w-[100px] border-r">Default</TableHead>
      <TableHead className="w-[200px] border-r">Type</TableHead>
      <TableHead className="border-r">Description</TableHead>
      <TableHead>Required</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="border-r">enableAutocomplete</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">Enables the autocomplete feature.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">autocompleteOptions</TableCell>
      <TableCell className="border-r">[]</TableCell>
      <TableCell className="border-r">string[]</TableCell>
      <TableCell className="border-r">Defines the options available for autocomplete.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">restrictTagsToAutocompleteOptions</TableCell>
      <TableCell className="border-r">false</TableCell>
      <TableCell className="border-r">boolean</TableCell>
      <TableCell className="border-r">
        Restricts the user to selecting tags only from the autocomplete options.
      </TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">autocompleteFilter</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">Filters the autocomplete options based on the user input.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">autocompleteFilter</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">Filters the autocomplete options based on the user input.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
  </TableBody>
</Table>

### Input Properties

<br />

<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[150px] border-r">Prop</TableHead>
      <TableHead className="w-[100px] border-r">Default</TableHead>
      <TableHead className="border-r">Type</TableHead>
      <TableHead className="border-r">Description</TableHead>
      <TableHead>Required</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow className="h-[100px]">
      <TableCell className="border-r">inputProps</TableCell>
      <TableCell className="border-r">Object</TableCell>
      <TableCell className="border-r">InputHTMLAttributes</TableCell>
      <TableCell className="border-r">Additional props to pass to the input field.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
  </TableBody>
</Table>

### Events

<br />

<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[150px] border-r">Prop</TableHead>
      <TableHead className="w-[100px] border-r">Default</TableHead>
      <TableHead className="w-[200px] border-r">Type</TableHead>
      <TableHead className="border-r">Description</TableHead>
      <TableHead>Required</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="border-r">onTagAdd</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">Callback function that triggers when a new tag is added.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">onTagRemove</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">Callback function that triggers when a tag is removed.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">onInputChange</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">
        Callback function that triggers on every keystroke within the input field.
      </TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">onFocus</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">Callback function that triggers when the input field is focused.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">onBlur</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">Callback function that triggers when the input field loses focus.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">onTagClick</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">Callback function that triggers when a tag is clicked.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">onClearAll</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">
        Callback function that triggers when the "Clear All" button is clicked.
      </TableCell>
      <TableCell>No</TableCell>
    </TableRow>
  </TableBody>
</Table>

### Methods

<br />

<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[150px] border-r">Method</TableHead>
      <TableHead className="w-[100px] border-r">Default</TableHead>
      <TableHead className="w-[200px] border-r">Type</TableHead>
      <TableHead className="border-r">Description</TableHead>
      <TableHead>Required</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="border-r">validateTag</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">Callback function that validates the tag before adding it.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">customTagRenderer</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">Customizes the rendering of tags.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="border-r">generateTagId</TableCell>
      <TableCell className="border-r">null</TableCell>
      <TableCell className="border-r">Function</TableCell>
      <TableCell className="border-r">Generates an id for a newly created tag.</TableCell>
      <TableCell>No</TableCell>
    </TableRow>
  </TableBody>
</Table>
import {custom} from "zod"
